<template>
<<<<<<< HEAD
  <view>
    <view class="box1">
      <view class="left">
        <u-avatar size="72" :src="src" shape="circle"></u-avatar>
      </view>
      <view class="right">
        <view class="top"> <span>猪宝宝</span> </view>
        <view class="boutton" @click="xq">
          <image
            style="width: 7vw; height: 4vh"
            src="../../static/手机.png"
            mode=""
          ></image>
          <span>暂无绑定手机号</span>
          <span style="margin-left: 30vw">></span>
        </view>
      </view>
    </view>

    <view class="box2" style="border: 1px solid #f2f2f2">
      <view class="box2s" style="border-right: 1px solid #f2f2f2">
        <dl>
          <dt><span style="font-size: 26px; color: #ff9900">0.00</span>元</dt>
          <dd>我的余额</dd>
        </dl>
      </view>
      <view class="box2s" style="border-right: 1px solid #f2f2f2">
        <dl>
          <dt><span style="font-size: 26px; color: #ff5f3e">0</span>个</dt>
          <dd>我的优惠</dd>
        </dl>
      </view>
      <view class="box2s">
        <dl>
          <dt><span style="font-size: 26px; color: #6ac20b">0</span>分</dt>
          <dd>我的积分</dd>
        </dl>
      </view>
    </view>

    <view class="box3">
      <view style="margin-bottom: 2vh">
        <u-modal
          :show="show"
          @confirm="confirm"
          ref="uModal"
          :asyncClose="true"
        ></u-modal>
        <u-button @click="showModal">
          <image
            style="width: 5vw; height: 3vh"
            src="../../static/我的订单.png"
            mode=""
          ></image>
          <span style="margin-left: 2vw">我的订单</span>
          <span style="margin-left: 65vw; color: #ccc; font-size: 19px">></span>
        </u-button>
      </view>
      <view style="margin-bottom: 2vh">
        <u-modal
          :show="show"
          @confirm="confirm"
          ref="uModal"
          :asyncClose="true"
        ></u-modal>
        <u-button @click="showModal">
          <image
            style="width: 5vw; height: 3vh"
            src="../../static/积分券 icon.png"
            mode=""
          ></image>
          <span style="margin-left: 2vw">积分商城</span>
          <span style="margin-left: 65vw; color: #ccc; font-size: 19px">></span>
        </u-button>
      </view>
      <view style="margin-bottom: 2vh">
        <u-modal
          :show="show"
          @confirm="confirm"
          ref="uModal"
          :asyncClose="true"
        ></u-modal>
        <u-button @click="showModal">
          <image
            style="width: 5vw; height: 3vh"
            src="../../static/会员徽章.png"
            mode=""
          ></image>
          <span style="margin-left: 2vw">起点外卖会员卡</span>
          <span style="margin-left: 56vw; color: #ccc; font-size: 19px">></span>
        </u-button>
      </view>
      <view style="margin-bottom: 2vh">
        <u-modal
          :show="show"
          @confirm="confirm"
          ref="uModal"
          :asyncClose="true"
        ></u-modal>
        <u-button @click="showModal">
          <image
            style="width: 5vw; height: 3vh"
            src="../../static/服务中心.png"
            mode=""
          ></image>
          <span style="margin-left: 2vw">服务中心</span>
          <span style="margin-left: 65vw; color: #ccc; font-size: 19px">></span>
        </u-button>
      </view>
    </view>
    <view class="box4">
      <u-button
        style="
          margin-top: 9vh;
          background-color: red;
          border: none;
          height: 6vh;
        "
        type="primary"
        size="small"
        text="退出"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      src: "https://i04piccdn.sogoucdn.com/ab9feb89141ab619",
    };
  },
  methods: {
    xq() {
      uni.navigateTo({
        url: "/pages/details/details",
      });
    },
    showModal() {
      this.show = true;
    },
    confirm() {
      setTimeout(() => {
        // 3秒后自动关闭
        this.show = false;
      }, 10);
    },
  },
};
</script>

<style>
.box1 {
  width: 100%;
  height: 15vh;
  background-color: #02a774;
  border-top: 2px solid #fff;
}

.left {
  width: 30%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right {
  width: 70%;
  height: 100%;
  float: left;
}

.top {
  width: 100%;
  height: 50%;
  font-weight: 900;
  font-size: 19px;
  line-height: 50px;
  color: aliceblue;
}

.boutton {
  width: 100%;
  height: 50%;
  color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 {
  width: 100%;
  height: 15vh;
}
.box2s {
  width: 32%;
  height: 100%;
  float: left;
  margin-right: 1.1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #898989;
  font-size: 14px;
  text-align: center;
}
.box3 {
  width: 100%;
  height: 40vh;
}
=======
	<view>
		我的
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

>>>>>>> origin/peiliton
</style>
